<template>
  <div class="bookEnd">
    <header>
      <span class="back" @click="$router.back(-1)">
        <svg-icon icon-class="back"></svg-icon>
      </span>
      <span>The End</span>
      <mt-button @click="download" class="download-btn">Download APP</mt-button>
    </header>
    <ul class="main">
      <h3 class="title">Maybe You Like</h3>
      <list-template
        v-for="item of list"
        :key="item.bookId"
        :item="item"
        :diff="'rankings-list'"
      />
    </ul>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      list: [], //书籍末尾推荐列表
      params: {
        pageNum: 1,
        pageSize: 20,
        id: this.$route.params.title,
      },
    };
  },
  components: {
    listTemplate,
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.bookLastRecommend();
  },
  methods: {
    ...mapMutations({
      setShowPopup: "SET_SHOW_POPUP",
      setCurrentPopup: "SET_CURRENT_POPUP",
    }),
    async bookLastRecommend() {
      try {
        let params = {
          bookId: this.$route.params.bookId,
        };
        let res = await this.$api.reader.bookLastRecommend(params);
        console.log(res);
        if (res.code === 1) {
          this.list = res.source;
        }
      } catch (e) {
        console.log(e);
      }
    },
    download() {
      this.setCurrentPopup({
        currentPopup: "download",
        downloadTip: "reader",
      });
      this.setShowPopup(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.bookEnd {
  > header {
    padding: 45px 15px 96px 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-weight: 600;
    font-size: 42px;
    color: #333333;
    .back {
      width: 100%;
      display: block;
      text-align: left;
      margin-bottom: 56px;
      .svg-icon {
        width: 56px;
        height: 56px;
      }
    }
    .download-btn {
      width: 596px;
      height: 100px;
      margin-top: 24px;
      font-size: 34px;
      color: #ffffff;
      border-radius: 20px;
      background: #e86472;
    }
  }
  > .main {
    padding: 0 40px;
    > h3.title {
      font-size: 32px;
      color: #333333;
      margin-bottom: 24px;
      line-height: 53px;
    }
  }
}
</style>
